<script lang="ts">
  import { getColorPreference, setColorPreference } from "$lib/utils";
  import { onMount } from "svelte";
  import * as store from "../../store";
  import { refresh } from "../../store";

  let theme = getColorPreference();
  store.theme.set(theme);

  function setTheme(value: string) {
    theme = value;
    setColorPreference(value);
    reflectPreference();
    store.theme.set(value);
  }

  const toggle = () => {
    if (refresh()) {
      setTheme(theme === "light" ? "dark" : "light");
    }
  };

  const reflectPreference = () => {
    document.firstElementChild.setAttribute("data-theme", theme);
  };

  reflectPreference();

  onMount(async () => {
    reflectPreference();
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", ({ matches: isDark }) => {
        setTheme(isDark ? "dark" : "light");
      });
  });
</script>

<button
  on:click={toggle}
  class="theme-toggle p-1"
  title="Toggles light & dark"
  aria-label="auto"
  aria-live="polite"
>
  <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
    <mask class="moon" id="moon-mask">
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <circle cx="24" cy="10" r="6" fill="black" />
    </mask>
    <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
    <g class="sun-beams" stroke="currentColor">
      <line x1="12" y1="1" x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
      <line x1="1" y1="12" x2="3" y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
    </g>
  </svg>
</button>
